<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="echarts.min.js"></script>
	<!-- <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> -->
    <script type="text/javascript" src="world_new.js"></script>
	<style>
	  *{margin:0;padding:0}
	  html,body{
	    width:100%;
	    height:100%;
	  }
	  #main{
	    width:1200px;
	    height:900px;
	    margin: 25px auto;
	    border:1px solid #ddd;
	  }
	  /*建议长宽比0.75，符合审美*/
	</style>
</head>
<body>
<div id="main"></div>

<script>
    // 获取echarts的容器
    var chart = echarts.init(document.getElementById("main"));
    var geoCoordMap = {
    	北京: [116.28, 39.54],
    	奥地利: [16.22,48.13],
    	澳大利亚:[149.08,-35.17],
    	比利时:[4.21,50.51],
    	朝鲜:[125.47,39],
    	德国:[13.2,52.31],
    	俄罗斯:[37.37,55.45],
    	法国:[2.2,48.51],
    	芬兰:[24.53,60.1],
    	韩国:[127.03,37.35],
    	荷兰:[4.52,52.21],
    	加拿大:[75.43,45.25],
    	马来西亚:[101.42,3.08],
    	美国:[77.02,38.53],
    	墨西哥:[99.09,19.28],
    	日本:[139.44,35.41],
    	泰国:[100.29,13.5],
    	西班牙:[-3.42,40.26],
    	新加坡:[103.45,1.22],
    	英国:[0.50,51.30]
    	
    };
    var BJData = [
    	[{name:'北京'},{name: "北京",value: 7}],
    	[{name:'北京'},{name: "奥地利",value: 2}],
    	[{name:'北京'},{name: "澳大利亚",value: 2}],
    	[{name:'北京'},{name: "比利时",value: 2}],
    	[{name:'北京'},{name: "朝鲜",value: 5}],
    	[{name:'北京'},{name: "德国",value: 6}],
    	[{name:'北京'},{name: "俄罗斯",value: 4}],
    	[{name:'北京'},{name: "法国",value: 4}],
    	[{name:'北京'},{name: "芬兰",value: 2}],
    	[{name:'北京'},{name: "韩国",value: 2}],
    	[{name:'北京'},{name: "荷兰",value: 2}],
    	[{name:'北京'},{name: "加拿大",value: 2}],
    	[{name:'北京'},{name: "马来西亚",value: 2}],
    	[{name:'北京'},{name: "美国",value: 12}],
    	[{name:'北京'},{name: "墨西哥",value: 2}],
    	[{name:'北京'},{name: "日本",value: 13}],
    	[{name:'北京'},{name: "泰国",value: 2}],
    	[{name:'北京'},{name: "西班牙",value: 4}],
    	[{name:'北京'},{name: "新加坡",value: 2}],
    	[{name:'北京'},{name: "英国",value: 5}]
    	];
    
    var description = {
    	北京: ["出发点"],
    	奥地利: ["2003年：阳阳、龙徽"],
    	澳大利亚:["2009年：网网、福妮"],
    	比利时:["2014年：星徽、好好"],
    	朝鲜:["1965年：一号、二号、三星、丹丹、琳琳"],
    	德国:["1974年：天天、宝宝","1997年：艳艳","2017年：梦梦、娇庆"],
    	俄罗斯:["1957年：平平","1959年：安安","2001年：文文、奔奔"],
    	法国:["1973年：燕燕、黎黎","2012年：欢欢、圆仔"],
    	芬兰:["2018年：金宝宝、华豹"],
    	韩国:["2016年：爱宝、乐宝"],
    	荷兰:["2017年：武雯、星雅"],
    	加拿大:["2013年：大毛、二顺"],
    	马来西亚:["2014年：福娃、凤仪"],
    	美国:["1972年：玲玲、兴兴","1984年","1996年：石石、白云","1999年：伦伦、洋洋","2000年：添添、美香","2013年：丫丫、乐乐"],
    	墨西哥:["1975年：迎迎、贝贝"],
    	日本:["1972年：兰兰、康康","1980年：欢欢","1982年：飞飞","1994年：永明、蓉滨、梅梅","2000年：锦竹、爽爽、兴兴","2002年：旦旦","2011年：比力、仙女"],
    	泰国:["2003年：林惠、创创"],
    	西班牙:["1978年：绍绍、强强","2007年：冰星、花嘴巴"],
    	新加坡:["2012年：凯凯、嘉嘉"],
    	英国:["1958年：姬姬","1974年：佳佳、晶晶","2011年：甜甜、阳光"]
    }
	
	var convertData = function (data) {
	    var res = [];
	    for (var i = 0; i < data.length; i++) {
	        var dataItem = data[i];
	        var fromCoord = geoCoordMap[dataItem[0].name];
	        var toCoord = geoCoordMap[dataItem[1].name];
	        if (fromCoord && toCoord) {
	            res.push({
	                fromName: dataItem[0].name,
	                toName: dataItem[1].name,
	                coords: [fromCoord, toCoord]
	            });
	        }
	    }
	    return res;
	};

	var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
	var color = ['#a6c84c', '#ffa022', '#46bee9'];
    var series = [];

    [['北京', BJData]].forEach(function (item, i) {
        series.push({
			name: item[0]+"对外外交航线",
			type: 'lines',
			zlevel: 1,
			effect: {
				show: true,
				period: 6,
				trailLength: 0.7,
				color: '#fff',
				symbolSize: 3
			},
			lineStyle: {
				normal: {
					color: color[i],
					width: 0,
					curveness: 0.2
				}
			},
			data: convertData(item[1])
		},
		{
			name: item[0]+"对外外交航线",
			type: 'lines',
			zlevel: 2,
			symbol: ['none', 'arrow'],
			symbolSize: 10,
			effect: {
				show: true,
				period: 6,
				trailLength: 0,
				symbol: planePath,
				symbolSize: 15
			},
			lineStyle: {
				color: color[i],
				width: 1,
				opacity: 0.6,
				curveness: 0.2
			},
			data: convertData(item[1])
		},
		{
			name: '熊猫外交数据',
			type: 'effectScatter',
			coordinateSystem: 'geo',
			zlevel: 2,
			rippleEffect: {
				brushType: 'stroke'
			},
			label: {
				show: true,
				position: 'right',
				color:'#7cf800',
				formatter: '{b}'
			},
			symbolSize: function (val) {
				return val[2]*2;
			},
			itemStyle: {
				color: color[i]
			},
			data: item[1].map(function (dataItem) {
				return {
					name: dataItem[1].name,
					value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
				};
			})
		});
    });

    option = {
        backgroundColor: '#000',
        //悬浮提示
        tooltip: {
			trigger: "item",
			borderColor: "#FFFFCC",
			showDelay: 0,
			hideDelay: 0,
		   // enterable: true,
			transitionDuration: 0,
		   // extraCssText: "z-index:100",formatter
			formatter: function (params, ticket, callback) {
				//根据业务自己拓展要显示的内容
				var res = "";
				var name = params.name;
				var list = description[name]
				res = "<center><strong style='color:#fff;'>" + name.toString().split(' ')[0] + "</strong></center>";
				if (typeof(list) != "undefined") {
				    for (var i = 0; i < list.length; i++) {
				    	// var year = list[i].split(":")[0]
				    	// var names = list[i].split(":")[1]
				    	res +=  "<span style='color:#fff;'>" + list[i] + "</span><br/>";
				    }
				}
				
				
				return res;
			}
		},
        
        geo: {
            map: "world",
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true, //是否允许缩放
            layoutCenter: ["25%", "60%"], //地图位置
            layoutSize: "200%",
            itemStyle: {
                normal: {
                    color: ["#04284e"], //地图背景色
                    //color: ['orangered','yellow','lightskyblue']
                    borderColor: "#5bc1c9" //省市边界线
                },
                emphasis: {
                    color: "rgba(37, 43, 61, .5)" //悬浮背景
                }
            }
        },
        series: series
    };
    chart.setOption(option);
</script>
</body>
</html>